import './View.scss'
import React, { PureComponent as Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Table, Icon, Row, Col, Tooltip, message } from 'antd'
import { Link } from 'react-router-dom'
import AceEditor from 'client/components/AceEditor/AceEditor'
import { formatTime, safeArray } from '../../../../common.js'
import ErrMsg from '../../../../components/ErrMsg/ErrMsg.js'
import variable from '../../../../constants/variable'
import constants from '../../../../constants/variable.js'
import copy from 'copy-to-clipboard'
import SchemaTable from '../../../../components/SchemaTable/SchemaTable.js'

const HTTP_METHOD = constants.HTTP_METHOD

@connect(state => {
  return {
    curData: state.inter.curdata,
    custom_field: state.group.field,
    currProject: state.project.currProject,
  }
})
class View extends Component {
  constructor(props) {
    super(props)
    this.state = {
      init: true,
      enter: false,
    }
  }
  static propTypes = {
    curData: PropTypes.object,
    currProject: PropTypes.object,
    custom_field: PropTypes.object,
  }

  req_body_form(req_body_type, req_body_form) {
    if (req_body_type === 'form') {
      const columns = [
        {
          title: '参数名称',
          dataIndex: 'name',
          key: 'name',
          width: 140,
        },
        {
          title: '参数类型',
          dataIndex: 'type',
          key: 'type',
          width: 100,
          render: text => {
            text = text || ''
            return text.toLowerCase() === 'text' ? (
              <span>
                <i className='query-icon text'>T</i>文本
              </span>
            ) : (
              <span>
                <Icon type='file' className='query-icon' />
                文件
              </span>
            )
          },
        },
        {
          title: '是否必须',
          dataIndex: 'required',
          key: 'required',
          width: 100,
        },
        {
          title: '示例',
          dataIndex: 'example',
          key: 'example',
          width: 80,
          render(_, item) {
            return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
          },
        },
        {
          title: '备注',
          dataIndex: 'value',
          key: 'value',
          render(_, item) {
            return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
          },
        },
      ]

      const dataSource = []
      if (req_body_form && req_body_form.length) {
        req_body_form.map((item, i) => {
          dataSource.push({
            key: i,
            name: item.name,
            value: item.desc,
            example: item.example,
            required: item.required == 0 ? '否' : '是',
            type: item.type,
          })
        })
      }

      return (
        <div
          style={{ display: dataSource.length ? '' : 'none' }}
          className='colBody'>
          <Table
            bordered
            size='small'
            pagination={false}
            columns={columns}
            dataSource={dataSource}
          />
        </div>
      )
    }
  }
  res_body(res_body_type, res_body, res_body_is_json_schema) {
    if (res_body_type === 'json') {
      if (res_body_is_json_schema) {
        return <SchemaTable dataSource={res_body} />
      } else {
        return (
          <div className='colBody'>
            {/* <div id="vres_body_json" style={{ minHeight: h * 16 + 100 }}></div> */}
            <AceEditor
              data={res_body}
              readOnly={true}
              style={{ minHeight: 600 }}
            />
          </div>
        )
      }
    } else if (res_body_type === 'raw') {
      return (
        <div className='colBody'>
          <AceEditor
            data={res_body}
            readOnly={true}
            mode='text'
            style={{ minHeight: 300 }}
          />
        </div>
      )
    }
  }

  req_body(req_body_type, req_body_other, req_body_is_json_schema) {
    if (req_body_other) {
      if (req_body_is_json_schema && req_body_type === 'json') {
        return <SchemaTable dataSource={req_body_other} />
      } else {
        return (
          <div className='colBody'>
            <AceEditor
              data={req_body_other}
              readOnly={true}
              style={{ minHeight: 300 }}
              mode={req_body_type === 'json' ? 'javascript' : 'text'}
            />
          </div>
        )
      }
    }
  }

  req_query(query) {
    const columns = [
      {
        title: '参数名称',
        dataIndex: 'name',
        width: 140,
        key: 'name',
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: 140,
        key: 'type',
      },
      {
        title: '是否必须',
        width: 100,
        dataIndex: 'required',
        key: 'required',
      },
      {
        title: '示例',
        dataIndex: 'example',
        key: 'example',
        width: 80,
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
        },
      },
      {
        title: '备注',
        dataIndex: 'value',
        key: 'value',
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
        },
      },
    ]

    const dataSource = []
    if (query && query.length) {
      query.map((item, i) => {
        dataSource.push({
          key: i,
          name: item.name,
          value: item.desc,
          example: item.example,
          required: item.required == 0 ? '否' : '是',
          type: item.type,
        })
      })
    }

    return (
      <Table
        bordered
        size='small'
        pagination={false}
        columns={columns}
        dataSource={dataSource}
      />
    )
  }

  countEnter(str) {
    let i = 0
    let c = 0
    if (!str || !str.indexOf) {
      return 0
    }
    while (str.indexOf('\n', i) > -1) {
      i = str.indexOf('\n', i) + 2
      c++
    }
    return c
  }

  componentDidMount() {
    if (!this.props.curData.title && this.state.init) {
      this.setState({ init: false })
    }
  }

  enterItem = () => {
    this.setState({
      enter: true,
    })
  }

  leaveItem = () => {
    this.setState({
      enter: false,
    })
  }

  copyUrl = url => {
    copy(url)
    message.success('已经成功复制到剪切板')
  }

  flagMsg = (mock, strice) => {
    if (mock && strice) {
      return <span>( 全局mock & 严格模式 )</span>
    } else if (!mock && strice) {
      return <span>( 严格模式 )</span>
    } else if (mock && !strice) {
      return <span>( 全局mock )</span>
    } else {
      return
    }
  }

  render() {
    const dataSource = []
    if (
      this.props.curData.req_headers &&
      this.props.curData.req_headers.length
    ) {
      this.props.curData.req_headers.map((item, i) => {
        dataSource.push({
          key: i,
          name: item.name,
          required: item.required == 0 ? '否' : '是',
          value: item.value,
          example: item.example,
          desc: item.desc,
        })
      })
    }

    const req_dataSource = []
    if (this.props.curData.req_params && this.props.curData.req_params.length) {
      this.props.curData.req_params.map((item, i) => {
        req_dataSource.push({
          key: i,
          name: item.name,
          desc: item.desc,
          example: item.example,
          type: item.type,
        })
      })
    }
    const req_params_columns = [
      {
        title: '参数名称',
        dataIndex: 'name',
        key: 'name',
        width: 140,
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        width: 140,
      },
      {
        title: '示例',
        dataIndex: 'example',
        key: 'example',
        width: 80,
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
        },
      },
      {
        title: '备注',
        dataIndex: 'desc',
        key: 'desc',
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.desc}</p>
        },
      },
    ]

    const columns = [
      {
        title: '参数名称',
        dataIndex: 'name',
        key: 'name',
        width: '200px',
      },
      {
        title: '参数值',
        dataIndex: 'value',
        key: 'value',
        width: '300px',
      },
      {
        title: '是否必须',
        dataIndex: 'required',
        key: 'required',
        width: '100px',
      },
      {
        title: '示例',
        dataIndex: 'example',
        key: 'example',
        width: '80px',
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
        },
      },
      {
        title: '备注',
        dataIndex: 'desc',
        key: 'desc',
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.desc}</p>
        },
      },
    ]
    let status = {
      undone: '未完成',
      done: '已完成',
    }

    let bodyShow =
      this.props.curData.req_body_other ||
      (this.props.curData.req_body_type === 'form' &&
        this.props.curData.req_body_form &&
        this.props.curData.req_body_form.length)

    let requestShow =
      (dataSource && dataSource.length) ||
      (req_dataSource && req_dataSource.length) ||
      (this.props.curData.req_query && this.props.curData.req_query.length) ||
      bodyShow

    let methodColor =
      variable.METHOD_COLOR[
        this.props.curData.method
          ? this.props.curData.method.toLowerCase()
          : 'get'
      ]

    // statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
    // const aceEditor = <div style={{ display: this.props.curData.req_body_other && (this.props.curData.req_body_type !== "form") ? "block" : "none" }} className="colBody">
    //   <AceEditor data={this.props.curData.req_body_other} readOnly={true} style={{ minHeight: 300 }} mode={this.props.curData.req_body_type === 'json' ? 'javascript' : 'text'} />
    // </div>
    if (!methodColor) {
      methodColor = 'get'
    }

    const { tag, up_time, title, uid, username } = this.props.curData

    let res = (
      <div className='caseContainer'>
        <h2 className='interface-title' style={{ marginTop: 0 }}>
          基本信息
        </h2>
        <div className='panel-view'>
          <Row className='row'>
            <Col span={4} className='colKey'>
              接口名称：
            </Col>
            <Col span={8} className='colName'>
              {title}
            </Col>
            <Col span={4} className='colKey'>
              创&ensp;建&ensp;人：
            </Col>
            <Col span={8} className='colValue'>
              <Link className='user-name' to={'/user/profile/' + uid}>
                <img src={'/api/user/avatar?uid=' + uid} className='user-img' />
                {username}
              </Link>
            </Col>
          </Row>
          <Row className='row'>
            <Col span={4} className='colKey'>
              状&emsp;&emsp;态：
            </Col>
            <Col span={8} className={'tag-status ' + this.props.curData.status}>
              {status[this.props.curData.status]}
            </Col>
            <Col span={4} className='colKey'>
              更新时间：
            </Col>
            <Col span={8}>{formatTime(up_time)}</Col>
          </Row>
          {safeArray(tag) && safeArray(tag).length > 0 && (
            <Row className='row remark'>
              <Col span={4} className='colKey'>
                Tag ：
              </Col>
              <Col span={18} className='colValue'>
                {tag.join(' , ')}
              </Col>
            </Row>
          )}
          <Row className='row'>
            <Col span={4} className='colKey'>
              接口路径：
            </Col>
            <Col
              span={18}
              className='colValue'
              onMouseEnter={this.enterItem}
              onMouseLeave={this.leaveItem}>
              <span
                style={{
                  color: methodColor.color,
                  backgroundColor: methodColor.bac,
                }}
                className='colValue tag-method'>
                {this.props.curData.method}
              </span>
              <span className='colValue'>
                {this.props.currProject.basepath}
                {this.props.curData.path}
              </span>
              <Tooltip title='复制路径'>
                <Icon
                  type='copy'
                  className='interface-url-icon'
                  onClick={() =>
                    this.copyUrl(
                      this.props.currProject.basepath + this.props.curData.path,
                    )
                  }
                  style={{
                    display: this.state.enter ? 'inline-block' : 'none',
                  }}
                />
              </Tooltip>
            </Col>
          </Row>
          <Row className='row'>
            <Col span={4} className='colKey'>
              Mock地址：
            </Col>
            <Col span={18} className='colValue'>
              {this.flagMsg(
                this.props.currProject.is_mock_open,
                this.props.currProject.strice,
              )}
              <span
                className='href'
                onClick={() =>
                  window.open(
                    location.protocol +
                      '//' +
                      location.hostname +
                      (location.port !== '' ? ':' + location.port : '') +
                      `/mock/${this.props.currProject._id}${this.props.currProject.basepath}${this.props.curData.path}`,
                    '_blank',
                  )
                }>
                {location.protocol +
                  '//' +
                  location.hostname +
                  (location.port !== '' ? ':' + location.port : '') +
                  `/mock/${this.props.currProject._id}${this.props.currProject.basepath}${this.props.curData.path}`}
              </span>
            </Col>
          </Row>
          {this.props.curData.custom_field_value &&
            this.props.custom_field.enable && (
              <Row className='row remark'>
                <Col span={4} className='colKey'>
                  {this.props.custom_field.name}：
                </Col>
                <Col span={18} className='colValue'>
                  {this.props.curData.custom_field_value}
                </Col>
              </Row>
            )}
        </div>
        {this.props.curData.desc && <h2 className='interface-title'>备注</h2>}
        {this.props.curData.desc && (
          <div
            className='tui-editor-contents'
            style={{ margin: '0px', padding: '0px 20px', float: 'none' }}
            dangerouslySetInnerHTML={{ __html: this.props.curData.desc }}
          />
        )}
        <h2
          className='interface-title'
          style={{ display: requestShow ? '' : 'none' }}>
          请求参数
        </h2>
        {req_dataSource.length ? (
          <div className='colHeader'>
            <h3 className='col-title'>路径参数：</h3>
            <Table
              bordered
              size='small'
              pagination={false}
              columns={req_params_columns}
              dataSource={req_dataSource}
            />
          </div>
        ) : (
          ''
        )}
        {dataSource.length ? (
          <div className='colHeader'>
            <h3 className='col-title'>Headers：</h3>
            <Table
              bordered
              size='small'
              pagination={false}
              columns={columns}
              dataSource={dataSource}
            />
          </div>
        ) : (
          ''
        )}
        {this.props.curData.req_query && this.props.curData.req_query.length ? (
          <div className='colQuery'>
            <h3 className='col-title'>Query：</h3>
            {this.req_query(this.props.curData.req_query)}
          </div>
        ) : (
          ''
        )}

        <div
          style={{
            display:
              this.props.curData.method &&
              HTTP_METHOD[this.props.curData.method.toUpperCase()].request_body
                ? ''
                : 'none',
          }}>
          <h3 style={{ display: bodyShow ? '' : 'none' }} className='col-title'>
            Body:
          </h3>
          {this.props.curData.req_body_type === 'form'
            ? this.req_body_form(
                this.props.curData.req_body_type,
                this.props.curData.req_body_form,
              )
            : this.req_body(
                this.props.curData.req_body_type,
                this.props.curData.req_body_other,
                this.props.curData.req_body_is_json_schema,
              )}
        </div>

        <h2 className='interface-title'>返回数据</h2>
        {this.res_body(
          this.props.curData.res_body_type,
          this.props.curData.res_body,
          this.props.curData.res_body_is_json_schema,
        )}
      </div>
    )

    if (!this.props.curData.title) {
      if (this.state.init) {
        res = <div />
      } else {
        res = <ErrMsg type='noData' />
      }
    }
    return res
  }
}

export default View
